import React from 'react'
// 引入样式
import learnSass from './learnSass.module.scss'


const colorList = ["pic","video", "ppt","dimensions","photography","h5","gif","text"]

export default function LearnSass() {
  return (
    <div>
        <h1>LearnSass</h1>
        学习sass的样式
        <div color={learnSass.sassLearnColor}
            className={learnSass.testSass}
        >
            测试
        </div>
        <div className={learnSass.submit_button}>
            按钮
        </div>
        <div className={learnSass.submit_fun_button}>
            使用 sass @mixin 动态改
        </div>

        <div 
            className={learnSass.bg_color}
            data-theme="theme1"
        >
            动态颜色
        </div>

        <div id='sassidcolor'>
            通过 ID 选择来设置颜色
        </div>

        <div>
            sass for 循环
        </div>

        {
            colorList.map(type => <div
                key={type}
                className={learnSass['style_'+type]}
            >
                {type}
                <span 
                    className={learnSass['style_chil_'+type]}
                >
                    {"=== ___chil__opacity-"+type}
                </span>
            </div>)
        }

    </div>
  )
}
